<template>
  <div v-if="showChart" ref="deviceType" id="amiddboxtbott2" class="amiddboxtbott2content"></div>
  <div v-else ></div>
</template>

<script>
import { ref, onMounted, watch } from "vue";

import { useECharts } from "@/hooks/useECharts";

export default {
  name: "device_type_chart",

  props: {
    echartData: Array
  },

  setup(props, ctx) {
    const deviceType = ref(null);
    const { setOptions } = useECharts(deviceType, ctx);
    let showChart = ref(false);
    onMounted(() => {
      if (props.echartData.length > 0) {
        showChart = true
      }
      console.log('showchart', props.echartData, showChart)
      drawEchart(props.echartData)
    });

    const drawEchart = (data) => {
      let legendData = []
      data.forEach(element => {
        legendData.push(element.name)
      });
      
      setOptions({
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
          backgroundColor: "rgba(0,0,0,0.8)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          data: legendData,
          color: "#fff",
          textStyle: {
            color: "#fff",
          },
          pageTextStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: data,
            label: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
            },
          },
        ],
      });
    }

    watch(props, (val)=> {
      showChart = true
      drawEchart(val.echartData)
    },{ deep: true , immediate: true })

    return {
      deviceType,
      showChart,
    };
  },
};
</script>


<style scoped>
.amiddboxtbott2content {
  width: 91.8%;
  height: 86%;
  margin-left: 4.4%;
  margin-top: 1.6%;
}
</style>